<template>
    <div class="animated fadeIn" style="background-color: white;width: 100%">
        <button @click="change">{{isMap ? '地图' : '柱状图'}}</button>
        <div ref="chinaMap" id="chinaMap" style="width: 100%"></div>
    </div>
</template>
<script>
    // import echarts from 'echarts'
    import * as echarts from 'echarts';
    import 'echarts/map/js/china.js';

    export default {
        name: "ChinaMap",
        props:{
            chinaData:Array
        },
        data () {
            return {
                isMap:true,
                dataList:this.chinaData
            }
        },
        methods: {
            change(){
              this.isMap = !this.isMap
            },
            buildMap(){
                let myChart = echarts.init(this.$refs.chinaMap);
                let option = {
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    tooltip: {
                        formatter:function(params){
                            return params.seriesName+'<br />'+params.name+'：'+params.value
                        }//数据格式化
                    },
                    visualMap: {
                        min: 0,
                        max: 10500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高','低'],//取值范围的文字
                        inRange: {
                            color: ['#fff4e6', '#dd2002']//取值范围的颜色
                        },
                        show:true//图注
                    },
                    geo: {
                        map: 'china',
                        roam: false,//不开启缩放和平移
                        zoom:1.23,//视角缩放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize:'10',//注意：地图省份名字字体如果过大会导致字体重叠
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal:{
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis:{
                                areaColor: '#F3B329',//鼠标选择区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series : [
                        {
                            name: '信息量',
                            type: 'map',
                            geoIndex: 0,
                            data:this.dataList
                        }
                    ]
                };
                let barOption = {
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        axisLabel: {
                            rotate: 30
                        },
                        data: this.dataList.map(function (item) {
                            return item.name;
                        })
                    },
                    animationDurationUpdate: 1000,
                    series: {
                        type: 'bar',
                        id: 'population',
                        data: this.dataList.map(function (item) {
                            return item.value;
                        }),
                        universalTransition: true
                    }
                };
                let currentOption = option;
                myChart.setOption(option);
                currentOption = currentOption === option ? barOption : option;
                myChart.setOption(currentOption, true);
                setInterval(function () {
                    currentOption = currentOption === option ? barOption : option;
                    myChart.setOption(currentOption, true);
                }, 2000);
            }
        },
        mounted() {

            console.log(this.dataList)
            this.buildMap()
            this.dataList = this.chinaData

        }
    }
</script>

<style scoped>
    *{margin:0;padding:0}
    html,body{
        width:100%;
        height:100%;
    }
    #chinaMap{
        min-width:360px;
        min-height:400px;
        border:none;
    }
</style>